<!-- subpkg_consult/room/components/rate-info.vue -->
<script setup>
	import { ref } from 'vue'
	import { evaluateDoctorAPI } from '../../../apis/doctor'

	// 接收父组件的数据
	const props = defineProps({
		orderId: String,
		doctorId: String,
		hasEvaluate: Boolean,
		evaMsg: {
			type: Object,
			default: {}
		}
	})

	const formData = ref({
		score: props.evaMsg.score || 0,
		content: props.evaMsg.content || '',
		anonymousFlag: 0
	})

	const onClickAnonymous = () => {
		formData.value.anonymousFlag = Math.abs(formData.value.anonymousFlag - 1)
	}

	const onFormSubmit = async () => {
		const res = await evaluateDoctorAPI({
			docId: props.doctorId,
			orderId: props.orderId,
			...formData.value
		})
		uni.showToast({
			icon: 'none',
			title: '评价成功'
		})
	}
</script>
<template>
	<!-- 医生评价 -->
	<view class="doctor-rating">
		<view class="title">医生服务评价</view>
		<view class="subtitle">本次在线问诊服务您还满意吗？</view>
		<view class="rating">
			<uni-rate :size="28" margin="12" v-model="formData.score" />
		</view>
		<view class="text">
			<uni-easyinput
				type="textarea"
				maxlength="150"
				:input-border="false"
				:styles="{ backgroundColor: '#f6f6f6' }"
				placeholder-style="font-size: 28rpx; color: #979797"
				placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
				v-model="formData.content"
			/>
			<text class="word-count">{{ formData.content?.length || 0 }}/150</text>
		</view>
		<view class="anonymous" @click="onClickAnonymous" v-if="!hasEvaluate">
			<uni-icons
				v-if="formData.anonymousFlag === 1"
				size="16"
				color="#16C2A3"
				type="checkbox-filled"
			/>
			<uni-icons v-else size="16" color="#d1d1d1" type="circle" />
			<text class="label">匿名评价</text>
		</view>
		<button class="uni-button" @click="onFormSubmit" v-if="!hasEvaluate">
			提交
		</button>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		}
	}
</script>
<style lang="scss">
	.doctor-rating {
		padding: 30rpx 30rpx 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 60rpx;

		.title {
			text-align: center;
			font-size: 30rpx;
			color: #121826;
		}

		.subtitle {
			text-align: center;
			font-size: 24rpx;
			color: #6f6f6f;
			margin: 10rpx 0 20rpx;
		}

		.rating {
			display: flex;
			justify-content: center;
		}

		.text {
			padding: 20rpx 30rpx;
			margin-top: 20rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;
			position: relative;
		}

		:deep(.uni-easyinput__content-textarea) {
			font-size: 28rpx;
		}

		.word-count {
			position: absolute;
			bottom: 20rpx;
			right: 30rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #6f6f6f;
		}

		.anonymous {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 0;
			color: #6f6f6f;
			font-size: 24rpx;

			.label {
				margin-left: 6rpx;
			}
		}

		.uni-button[disabled] {
			color: #a6dbd5;
			background-color: #eaf8f6;
		}
	}
</style>
